<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="order-top flexWarpCenterColumn">
					<view class="shop-name">{{orderData.shop_name}}-{{orderData.equipment_name}}</view>
					<view class="order-time">
						<text>约球</text>
						<text>{{orderData.duration}}小时</text>
					</view>
				</view>
				<view class="order-info-box">
					<view class="order-info flexWrap">
						<view>已选时间：</view>
						<view>{{orderData.selected_time}}</view>
					</view>
					<view class="order-info flexWrap">
						<view>订单金额：</view>
						<view>¥{{orderData.price||orderData.pay_money}}</view>
					</view>
				</view>
				<view class="point-box">
					<view>温馨提示：</view>
					<view>1、约球不可使用优惠券、会员卡、通卡。</view>
					<view>2、约定时间{{Number(no_responsibility_cancel/60)}}小时前可无责取消，{{Number(no_responsibility_cancel/60)}}小时内不可取消，请慎重发起。</view>
					<view>3、未约成：无人应约，开始前{{minutes_ago}}分钟，系统会自动取消预约。</view>
				</view>
				<view class="disclaimer flexWrapNo">
					<view class="cheack" :class="{cheackd:agreeFlag}"></view>
					已阅读并同意<text @tap="showModel()">《小爱自助免责声明》</text>
				</view>
				<view class="btn-box flexWrapNo">
					<view class="wechat-pay" @tap="doAppointment(2)" v-if="id">确认支付</view>
					<view class="wechat-pay" @tap="comfirmPay()" v-else>确认支付</view>
				</view>
				<view class="model-box" v-if="modelFlag">
					<view class="title">小爱自助免责声明</view>
					<view class="model-cont">
						<view>小爱24H自助台球厅是以“安全、自助、环保、自律、节约”为宗旨的自发性体育活动场所。</view>
						<view>本球厅由用户自发组织和规划活动地点、活动时间；</view>
						<view> 本球厅限制参加活动的最多人数为每台4人（包含）；</view>
						<view>出于安全原因劝阻不适合的人员参加该活动；</view>
						<view>在活动中请各自保管好自己的私人物品。</view>
						<view>本活动属于自愿性、自助型活动，当由于意外事故，突发气候变化、突发疾病等不可预测因素造成身体损害，或者因个人的粗心大意造成私人物品丢失，与本球厅无关，请自行承担相应风险与责任。</view>
						<view>该免责声明目的是为提高自律能力和抗风险能力，免除一些不必要的后果，让您在小爱24H自助台球厅的活动更加安全、舒适。</view>
					</view>
					<view class="model-bottom">
						<!-- <view class="notip flexWrapNo" @tap="changeCheck()">
							<view class="cheack" :class="{cheackd:check}"></view>
							<text>不再提示</text>
						</view> -->
						<view class="btns flexWrap">
							<view @tap="disAgree()">不同意</view>
							<view class="okey-btn" @tap="agree()">同意</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				orderData:{},
				check:false,
				modelFlag:false,
				agreeFlag:false,
				id:"",
				modify_num:0,
				customer_service_mobile:"",
				no_responsibility_cancel:"",
				about_ball_modify:"",
				minutes_ago:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			this.getAppointmentInfo();
			if(ops&&ops.id){
				this.id=ops.id
				this.doAppointment(1)
			}else{
				this.orderData=JSON.parse(ops.orderData)
			}
			this.agreeFlag=uni.getStorageSync('agreeFlag')||false
			if(!this.agreeFlag){
				this.showModel()
			}else{
				this.closeModel()
			}
		},
		methods: {
			getAppointmentInfo(){
				this.$request.post(this.$api.appointmentInfo, {
					id:uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.customer_service_mobile=data.customer_service_mobile
						this.modify_num=data.modify_num
						this.no_responsibility_cancel=data.no_responsibility_cancel
						this.minutes_ago=data.minutes_ago
						this.about_ball_modify=data.about_ball_modify
					}
				})
			},
			// 应约界面
			doAppointment(type){
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => {
						this.$request.post(this.$api.doAppointment, {
							id:this.id,
							type:type
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								if(type==1){
									this.orderData=data
								}else{
									this.appletPay(data);
								}
							}
						})
					}
				})
			},
			changeCheck(){
				this.check=!this.check
				uni.setStorageSync('check',this.check)
			},
			closeModel(){
				this.modelFlag=false
			},
			showModel(){
				this.modelFlag=true
			},
			disAgree(){
				this.agreeFlag=false
				uni.setStorageSync('agreeFlag',this.agreeFlag)
				this.closeModel();
			},
			agree(){
				this.agreeFlag=true
				uni.setStorageSync('agreeFlag',this.agreeFlag)
				this.closeModel();
			},
			// 确认支付
			comfirmPay(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => {
						let timestamp = Date.parse(new Date())/1000;
						if(Math.abs(timestamp-this.orderTime)>300){
							uni.showModal({
								title: '提示',
								content: "当前页面停留过久，请新选择时间",
								success: function(res) {
									if(res.confirm){
										let pages = getCurrentPages(); //当前页
										let beforePage = pages[pages.length - 2]; //上个页面
										beforePage.$vm.tableDetails();
										uni.navigateBack({
											delta:1
										})
									}
								}
							});
							return;
						}
						uni.showLoading({
							title:'加载中...',
							mask:true
						})
						this.orderData.type=2
						this.submitOrder();
					}
				})
			},
			// 条件订单验证
			submitOrder(){
				let orderData=JSON.parse(JSON.stringify(this.orderData))
				this.$request.post(this.$api.addAppoint,orderData, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					// 微信支付
					this.appletPay(data);
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 小程序支付
			appletPay(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: 'MD5',
					paySign: data.paySign,
					success(res) {
						that.$tools.showToast("支付成功");
						uni.showLoading({
							title:"正在为你跳转,请稍等",
							mask:true
						})
						setTimeout(() => {
							uni.setStorageSync("currentIndex", 2); //赋值
							uni.switchTab({
								url:'/pages/appointment/appointment'
							})
						},2000)
					},
					fail(err) {
						console.log(err);
						that.$tools.showToast('支付取消')
					},
					complete(result) {
						
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.pay-box{
		.pay-item{
			height: 160rpx;
			background: #1D1C5C;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			margin-top: 26rpx;
			.item-top{
				height: 80rpx;
				background: #353484;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				padding: 0 20rpx 0 28rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				.title{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					.title-icon{
						width: 56rpx;
						height: 56rpx;
						margin-right: 16rpx;
					}
				}
				.check-box{
					width: 44rpx;
					height: 44rpx;
					margin-left: 24rpx;
				}
			}
			.item-bottom{
				height: 80rpx;
				padding: 0 20rpx 0 28rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #BABABA;
				.yellow{
					color: #FFB726;
					margin-left: 20rpx;
				}
				.charge-btn{
					width: 128rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #FFB726;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFB726;
				}
				.arrow-icon{
					width: 36upx;
					height: 36upx;
				}
			}
		}
		.active{
			border: 2rpx solid #26BCFD;
			.item-top{
				background-color: #26BCFD;
			}
			.item-bottom{
				color: #FFFFFF;
			}
		}
	}
	.disclaimer{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color:#BABABA;
		position: fixed;
		left: 36rpx;
		right: 0;
		bottom: 140rpx;
		.cheack{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
			border: 1rpx solid #BABABA;
			border-radius: 50%;
		}
		.cheackd{
			width: 36rpx;
			height: 36rpx;
			background: url('../../static/home/select-icon.png') no-repeat center/100% 100%;
			border: none;
		}
		text{
			color: #26BCFD;
		}
	}
	.content{
		padding: 38upx;
	}
	.order-top{
		.shop-name{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #FFFFFF;
		}
		.order-time{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 66upx;
			color: #26BCFD;
			margin-top: 24upx;
		}
	}
	.order-info-box{
		margin-top: 42upx;
		border-bottom: 1rpx solid #55525D;
		.order-info{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #FFFFFF;
			border-top: 1rpx solid #55525D;
			padding: 38upx 0;
			.coupon-price{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #FFB726;
			}
		}
	}
	.total-money{
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44upx;
		color: #FFFFFF;
		margin-top: 42upx;
		.money{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 66upx;
			color: #26BCFD;
		}
	}
	.balance-box{
		margin-top: 34upx;
		.balance{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40upx;
			color: #FFB726;
		}
		.charge-btn{
			font-size: 20upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFB726;
			width: 90upx;
			height: 44upx;
			line-height: 44upx;
			text-align: center;
			border: 2upx solid #FFB726;
			border-radius: 16upx;
			margin-left: 24upx;
		}
	}
	.point-box{
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40upx;
		color: #BABABA;
		margin-top: 42upx;
	}
	.verification-box{
		width: 260rpx;
		height: 120rpx;
		margin:6upx auto;
		margin-bottom: 0;
	}
	.btn-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #1D1C5C;
		height: 120upx;
		padding: 0 48upx;
		justify-content: center;
		.balance-pay{
			width: 308upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #26BCFD;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: relative;
			.tipsLable{
				font-size: 20upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				width: 190upx;
				height: 36upx;
				text-align: center;
				line-height: 36upx;
				background:#FFB726;
				border-radius: 0px 16upx 0px 16upx;
				position: absolute;
				top: -2upx;
				right: 0;
			}
		}
		.wechat-pay{
			width: 308upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #26BCFD;
			background-color: #26BCFD;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: 44upx;
		}
	}
	.model-box{
		width: 710rpx;
		height: 1232rpx;
		background:#1D1C5C;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.title{
			font-size: 48rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			padding-top: 48rpx;
		}
		.model-cont{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFF;
			line-height: 50rpx;
			padding: 0 42rpx;
			margin-top: 40rpx;
		}
		.model-bottom{
			padding: 0 42rpx;
			position: absolute;
			bottom: 38rpx;
			left: 0;
			right: 0;
			margin: auto;
			.notip{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #BABABA;
				margin-right: 42rpx;
				flex: none;
				.cheack{
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
					border: 1rpx solid #BABABA;
					border-radius: 50%;
				}
				.cheackd{
					width: 36rpx;
					height: 36rpx;
					background: url('../../static/home/select-icon.png') no-repeat center/100% 100%;
					border: none;
				}
			}
			.btns{
				view{
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					border: 2rpx solid #26BCFD;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #26BCFD;
				}
				.okey-btn{
					width: 202rpx;
					background: #26BCFD;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 26rpx;
				}
			}
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>
